<template>
  <el-calendar v-model="date" v-bind="$attrs" v-on="$listeners">
    <template
      slot="dateCell"
      slot-scope="{date, data}" >
      <div class="_my-calendar-col" @dblclick="handleClick(data)" :style="{...(height?{'line-height':height}:''),'color':(render && render(data.day)?'#E6A23C':'')}">
        {{ data.day.split('-').slice(2)[0] }}
      </div>
    </template>
  </el-calendar>
</template>

<script>
  export default {
    name: "my-calendar",
    model: {
      prop: 'value',
      event: 'dateChange'
    },
    props:{
      /** model **/
      value: [Date, String, Number],
      /** 日历单元格行高 **/
      height: {
        type: String
      },
      /** 传入方法，根据条件判断，修改日历颜色 **/
      render: {
        type: Function,
      }
    },
    data(){
      return{
        date: ''
      }
    },
    methods:{
      /** 日期单元格双击事件，回传日期 **/
      handleClick(data){
        this.$emit('dayClick',data.day)
      }
    },
    watch:{
      date(v){
        this.$emit('dateChange',new Date(v).getFullYear() + '-' + (new Date(v).getMonth() + 1) + '-' + new Date(v).getDate());
      }
    }
  }
</script>

<style lang="scss" scoped>
  ._my-calendar-col {
    text-align: center;
  }
</style>
